<template>
  <view class="container">
    <view class="header">
      <button class="back-button" @click="handleBack">返回</button>
      <text class="title">个人信息</text>
      <button class="submit-button" @click="handleSubmit">确定</button>
    </view>
    <view class="form-group">
      <view class="input-item">
        <text class="label">电话号码</text>
        <input
          v-model="phone"
          class="input"
          type="text"
          placeholder="请输入电话号码"
          @input="validatePhone"
        />
      </view>
      <view class="input-item">
        <text class="label">姓名</text>
        <input
          v-model="name"
          class="input"
          type="text"
          placeholder="请输入姓名"
        />
      </view>
      <view class="input-item">
        <text class="label">性别</text>
        <input
          v-model="gender"
          class="input"
          type="text"
          placeholder="请输入性别"
        />
      </view>
      <view class="input-item">
        <text class="label">身高</text>
        <input
          v-model="height"
          class="input"
          type="text"
          placeholder="请输入身高cm"
        />
      </view>
      <view class="input-item">
        <text class="label">体重</text>
        <input
          v-model="weight"
          class="input"
          type="text"
          placeholder="请输入体重KG"
        />
      </view>
      <view class="input-item">
        <text class="label">出生日期</text>
        <input
          v-model="birthdate"
          class="input"
          type="text"
          placeholder="请输入出生日期"
        />
      </view>
      <view class="input-item">
        <text class="label">学历</text>
        <input
          v-model="education"
          class="input"
          type="text"
          placeholder="请输入学历"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const phone = ref('');
const name = ref('');
const gender = ref('');
const height = ref('');
const weight = ref('');
const birthdate = ref('');
const education = ref('');

const handleBack = () => {
  uni.navigateBack();
};

const handleSubmit = () => {
  // 验证电话号码
  if (!phone.value.trim()) {
    console.log('电话号码不能为空');
    return;
  }

  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!phoneRegex.test(phone.value)) {
    console.log('请输入有效的电话号码');
    return;
  }

  // 验证姓名
  if (!name.value.trim()) {
    console.log('姓名不能为空');
    return;
  }

  // 验证性别
  if (!gender.value.trim()) {
    console.log('性别不能为空');
    return;
  }

  // 验证身高
  if (!height.value.trim()) {
    console.log('身高不能为空');
    return;
  }

  // 验证体重
  if (!weight.value.trim()) {
    console.log('体重不能为空');
    return;
  }

  // 验证出生日期
  if (!birthdate.value.trim()) {
    console.log('出生日期不能为空');
    return;
  }

  // 验证学历
  if (!education.value.trim()) {
    console.log('学历不能为空');
    return;
  }

  console.log('注册成功', {
    phone: phone.value,
    name: name.value,
    gender: gender.value,
    height: height.value,
    weight: weight.value,
    birthdate: birthdate.value,
    education: education.value
  });
};

const validatePhone = () => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (phone.value && !phoneRegex.test(phone.value)) {
    console.log('请输入有效的电话号码');
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f6fa;
  padding: 0 20rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  background-color: #4e9eff;
  color: white;
}

.back-button, .submit-button {
  padding: 10rpx 20rpx;
  border: none;
  border-radius: 8rpx;
  background-color: white;
  color: #4e9eff;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.form-group {
  width: 100%;
  margin-top: 20rpx;
}

.input-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.label {
  width: 160rpx;
  font-size: 28rpx;
}

.input {
  flex: 1;
  height: 60rpx;
  border: 1px solid #ccc;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}
</style>